<!-- 时间组件 -->
<template>
	<view class="dates f-column-Wcenter">
		<view style="width: 100%;" class="f-row-between">
			<view
				class="date f-center"
				:style="{ width: 100 / dateTypes.length - 3 + '%' }"
				v-if="dateTypes.indexOf('d') > -1"
				:class="selected == 'd' ? 'selected' : ''"
				@click="onDateType('d')"
			>
				今日
			</view>
			<view
				class="date f-center"
				:style="{ width: 100 / dateTypes.length - 3 + '%' }"
				v-if="dateTypes.indexOf('zr') > -1"
				:class="selected == 'zr' ? 'selected' : ''"
				@click="onDateType('zr')"
			>
				昨日
			</view>
			<view
				class="date f-center"
				:style="{ width: 100 / dateTypes.length - 3 + '%' }"
				v-if="dateTypes.indexOf('z') > -1"
				:class="selected == 'z' ? 'selected' : ''"
				@click="onDateType('z')"
			>
				本周
			</view>
			<view
				class="date f-center"
				:style="{ width: 100 / dateTypes.length - 3 + '%' }"
				v-if="dateTypes.indexOf('m') > -1"
				:class="selected == 'm' ? 'selected' : ''"
				@click="onDateType('m')"
			>
				本月
			</view>
			<view
				class="date f-center"
				
				v-if="dateTypes.indexOf('zdy') > -1"
				:class="selected == 'zdy' ? 'selected' : ''"
				@click="onDateType('zdy')"
			>
				自定义
			</view>
		</view>
		<view v-if="showDate && selected != 'zdy'" style="margin-top: 20upx;height: 30upx;font-weight: 600;">{{ dates }}</view>
		<view v-if="showDate && selected == 'zdy'" style="margin-top: 20upx;height: 30upx;font-weight: 600;" class="f-row-WHcenter">
			<view class="zdyDate" @click="onSwiperDate('startD')">{{ datesZDY[0] }}</view>
			—
			<view class="zdyDate" @click="onSwiperDate('endD')">{{ datesZDY[1] }}</view>
		</view>
		<!-- 下拉 -->
		<view class="datePopup-box">
			<uni-popup id="datePopup" ref="datePopup" :type="'bottom'" @change="change">
				<picker-view class="picker-view f-row-Wcenter" :indicator-style="indicatorStyle" v-model="valuedate" @change="bindChange">
					<picker-view-column class="picker-view" style="width: 200upx;">
						<view class="item f-center" v-for="(item, index1) in years" :key="index1">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column class="picker-view" style="width: 200upx;">
						<view class="item f-center" v-for="(item, index2) in months" :key="index2">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column class="picker-view" style="width: 200upx;">
						<view class="item f-center" v-for="(item, index5) in days[month]" :key="index5">{{ item }}日</view>
					</picker-view-column>
				</picker-view>

				<view style="width: 100%;" class="btn-Block f-center">
					<view class="btn-left f-center" @click="onCancel">取消</view>
					<view class="btn-right f-center" @click="onDataSubmit">确定</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
//import eventVue from '@/common/eventVue.js';
export default {
	components: {},
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = {};
		const daysMax = {};
		const day = date.getDate();
		const p_currents = {
			startD: [],
			endD: []
		};
		for (let i = 2019; i <= year; i++) {
			years.push(i);
			if (i == year) {
				p_currents.startD.push(years.length - 1);
				p_currents.endD.push(years.length - 1);
			}
		}
		//算出月
		for (let i = 1; i <= 12; i++) {
			months.push(this.fill(i));
			if (month == i) {
				p_currents.startD.push(i - 1);
				p_currents.endD.push(i - 1);
			}
			var dateM = new Date(year, i, 0);
			let Tmax = dateM.getDate();
			daysMax[i] = Tmax;
			days[i] = [];

			for (let t = 1; t <= Tmax; t++) {
				days[i].push(t);
				if (t == day && month == i) {
					p_currents.startD.push(t - 1);
					p_currents.endD.push(t - 1);
				}
			}
		}
		return {
			years,
			year,
			months,
			month,
			daysMax,
			days,
			day,
			dates: '',
			p_currents,
			start_end: '',

			week: '',
			selected: 'zdy',
			date: {},
			datesZDY: [],

			valuedate: [1, 1, 1],
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`
		};
	},
	created() {
		this.$on('onSubmitSend', o => {
			this.onSubmit();
		});
	},
	computed: {},
	props: {
		dateTypes: {
			type: Array,
			//默认的别乱改 ['d', 'zr', 'm', 'z'];具体参数看视图层触发onDateType的传参
			default() {
				return ['d', 'zr', 'm', 'z'];
			}
		},
		showDate: {
			type: Boolean,
			default: false
		}
	},
	mounted() {
		this.onSubmit(this.selected);
	},
	methods: {
		change(e) {},
		onCancel() {
			this.$emit('onCancel', {
				events: 'onCancel'
			});
			this.$refs.datePopup.close();
		},
		onDataSubmit() {
			this.onSubmit(this.selected);
		},
		//点击自定义时间
		onSwiperDate(start_end) {
			//1as记录是开始/结束时间
			this.start_end = start_end;
			this.valuedate = [0, 0, 0];
			this.$nextTick(function() {
				this.valuedate = this.p_currents[this.start_end];
			});
			this.$refs.datePopup.open();
		},
		//选中日期
		bindChange(e) {
			let val = e.detail.value;
			//绑定下拉
			this.year = this.years[val[0]];
			this.month = val[1] + 1;
			this.day = val[2] + 1;
			//2as
			this.p_currents[this.start_end] = val;

			//this.onSubmit(this.selected);
		},
		onDateType(dateType) {
			this.selected = dateType;
			this.valuedate = [0, 0, 0];
			this.$nextTick(() => {
				if (this.dateType == 'zdy') {
					this.valuedate = this.p_currents[this.start_end];
					if (this.start_end == 'startD') {
						this.year = this.years[this.p_currents.startD[0]];
						this.month = this.month[this.p_currents.startD[1]];
						this.day = this.days[this.month][this.p_currents.startD[2]];
					} else {
						this.year = this.years[this.p_currents.endD[0]];
						this.month = this.month[this.p_currents.endD[1]];
						this.day = this.days[this.month][this.p_currents.endD[2]];
					}
				} else {
					this.onSubmit(dateType);
				}
			});
		},
		//周一 中国标准时间
		getWeek1(date) {
			let nowTime = date.getTime();
			let day = date.getDay() == 0 ? 7 : date.getDay();
			let oneDayLong = 24 * 60 * 60 * 1000;
			let time = nowTime - (day - 1) * oneDayLong;
			let week1 = new Date(time);
			return this.format(week1);
		},
		//将标准时间 字符串格式化(时间格式,前后推移多少天【可不传】)
		format(date, T) {
			if (T == undefined || T == '') {
				T = 0;
			}
			date.setDate(date.getDate() + T);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			return y + '-' + this.fill(m) + '-' + this.fill(d);
		},
		//格式化月 字符串格式化
		fill(a) {
			return 10 > a ? '0' + (0 | a) : a;
		},
		onSubmit(dateType) {
			var date = new Date();
			let selected = dateType || this.selected;
			let tmpdate = {
				events: 'onSubmit',
				anatype: 0, //周年月 类型
				dateType: selected,
				year: this.year,
				month: this.month,
				day: this.day,
				maxDay: this.daysMax[this.month],
				start_date: '',
				end_date: '',
				dateTypeName: ''
			};
			let data = { ...this.date, ...tmpdate };
			//根据不同的 时间格式 转换 时间截
			if (data.dateType == 'z') {
				let Week1 = this.getWeek1(date);
				let Week1Date = new Date(Week1);
				let strWeek1Date = this.format(Week1Date);
				data.start_date = Week1Date.getTime();
				let week7 = this.format(Week1Date, 6);
				data.end_date = new Date(week7).getTime();
				this.dates = strWeek1Date + ' 到 ' + week7;
				data.dateTypeName = '本周';
			} else if (data.dateType == 'm') {
				data.start_date = new Date(data.year + '-' + data.month + '-' + 1).getTime();
				data.end_date = new Date(data.year + '-' + data.month + '-' + data.maxDay).getTime();
				this.dates = data.year + '-' + data.month;
				data.dateTypeName = '本月';
			} else if (data.dateType == 'd') {
				data.start_date = date.getTime();
				data.end_date = data.start_date;
				this.dates = data.year + '-' + data.month + '-' + data.day;
				data.dateTypeName = '今日';
			} else if (data.dateType == 'zr') {
				let d2 = this.format(date, -1);
				data.start_date = new Date(d2).getTime();
				data.end_date = data.start_date;
				this.dates = d2;
				data.dateTypeName = '昨日';
			} else if (data.dateType == 'zdy') {
				if (this.datesZDY.length > 0) {
					if (this.start_end == 'startD') {
						let year = this.years[this.p_currents.startD[0]];
						let month = this.months[this.p_currents.startD[1]];
						let day = this.days[this.month][this.p_currents.startD[2]];
						this.datesZDY[0] = year + '-' + month + '-' + day;
					} else {
						let year = this.years[this.p_currents.endD[0]];
						let month = this.months[this.p_currents.endD[1]];
						let day = this.days[this.month][this.p_currents.endD[2]];
						this.datesZDY[1] = year + '-' + month + '-' + day;
					}
					this.dates = this.datesZDY[0] + ' — ' + this.datesZDY[1];
					let start_date = new Date(this.datesZDY[0]);
					let end_date = new Date(this.datesZDY[1]);
					data.start_date = start_date.getTime();
					data.end_date = end_date.getTime();
				} else {
					data.start_date = date.getTime();
					data.end_date = data.start_date;
					let day = data.year + '-' + data.month + '-' + data.day;
					this.dates = day + ' — ' + day;
					this.datesZDY = [day, day];
				}

				data.dateTypeName = '自定义';
			} else if (data.dateType == 'y') {
				data.start_date = new Date(data.year + '-01-' + 1).getTime();
				data.end_date = new Date(data.year + '-12-' + 31).getTime();
				this.dates = data.year;
				data.dateTypeName = '当年';
			} else {
			}
			this.selected = dateType;
			this.date = data;
			// var date3 = new Date(data.start_date);
			// var date4 = new Date(data.end_date);
			// console.log('开始时间', date3.getMonth(), date3.getDate());
			// console.log('结束时间', date4.getMonth(), date4.getDate());

			this.$emit('onSubmit', this.date);
			this.$refs.datePopup.close();
		}
	}
};
</script>

<style scoped lang="scss">
@charset "utf-8";
.dates {
	width: 100%;
	.date {
		padding: 0 10upx;
		height: 51upx;
		border: 1upx solid #d7d7d7;
		border-radius: 100upx;

		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #717171;
	}

	.selected {
		background: #128a80;
		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #fefefd;
	}
	.zdyDate {
		color: rgba(0, 170, 255, 0.9);
		margin: 10upx;
	}
}
.datePopup-box {
	background-color: rgba(255, 255, 255, 1);

	.btn-Block {
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		padding: 25upx;
		height: 230upx;

		.btn-left {
			width: 250upx;
			height: 80upx;
			border-radius: 10upx;
			color: rgba(0, 189, 0, 0.8);
			background-color: rgba(170, 255, 255, 1);
			background-image: linear-gradient(to top right, rgba(241, 240, 240, 1), rgba(238, 238, 238, 1));
			margin-right: 30upx;
		}

		.btn-right {
			width: 250upx;
			height: 80upx;
			border-radius: 10upx;
			color: rgba(255, 255, 250, 1);
			background-color: rgba(195, 195, 0, 1);
			background-image: linear-gradient(to top right, rgba(0, 180, 0, 0.8), rgba(0, 188, 0, 0.8));
		}
	}

	.picker-view {
		border-radius: 20upx 20upx 0 0;
		background-color: rgba(255, 254, 253, 1);
	}

	picker-view {
		width: 100%;
		height: 600upx;
	}
}
</style>
